<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" dir="ltr">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

	<title>Mootools Espresso UI</title>
	<meta name="description" content="A web applications user interface library built on the Mootools javascript framework" />

	<link rel="stylesheet" href="../css/style.css" type="text/css" />
	<link rel="stylesheet" href="../css/espresso.context.css" type="text/css" />
	<script type="text/javascript" src="../lib/mootools-beta-1.2b2.js" charset="utf-8"></script>
	<script type="text/javascript" src="../scripts/espresso.context.js" charset="utf-8"></script>

	<script type="text/javascript">
		window.addEvent('domready', function(){
			$('div1').addContext([
				{
					'name': 'Click Where?',
					'callback': function(e) {
						var tagName = e.target.tagName.toLowerCase(), x = e.page.x, y = e.page.y;
						alert('you clicked on <' + tagName + '> element at x: ' + x + ', and y: ' + y);
					}
				},
				{separator: true},
				{
					'name': 'About Espresso UI',
					'url': 'http://espresso-ui.googlecode.com/'
				},
				{separator: true},
				{
					'name': 'Download',
					'url': 'http://code.google.com/p/espresso-ui/downloads/list'
				},
				{separator: true},
				{
					'name': 'Send to...',
					'disabled': true
				}
			], {
				children: true
			});

			$('div2').addContext([
				{
					'name': 'Copy',
					'callback': function(e) {
						var tagName = e.target.tagName.toLowerCase(), x = e.page.x, y = e.page.y;
						alert('you clicked on <' + tagName + '> element at x: ' + x + ', and y: ' + y);
					}
				},
				{
					'name': 'Past'
				},
				{separator: true},
				{
					'name': 'Google',
					'url': 'http://www.google.com/'
				},
				{separator: true},
				{
					'name': 'Disable me',
					'disabled': true
				}
			], {
				children: false
			});
		});
	</script>

</head>
<body>

	<div id="div1" style="width: 250px; height: 150px; position:absolute;top:50px;left:25px; background-color: blue;">
		<p style="color:#fff;">Right-click here (Ctrl+Click for Opera).</p>
	</div>

	<div id="div2" style="width: 250px; padding: 4px; height: 150px; position:absolute;bottom:50px;right:25px; background-color: blue;">
		<p style="color:#000; background-color:#fff;">Right-click outside white, within blue (Ctrl+Click for Opera).</p>
	</div>

</body>
</html>
